	* {
	  margin: 0;
	  padding: 0;
	}

	body {
	  background-color: black;
	}

	.box {
	  top: 50%;
	  left: 50%;
	  width: 40px;
	  height: 40px;
	  position: absolute;
	}

	.box p {
	  width: 12px;
	  height: 12px;
	  border-radius: 50%;
	  background-color: white;
	  position: absolute;
	  animation: move 3s infinite linear;
	}

	.box p:nth-child(1) {
	  left: 0;
	  top: 0;
	}

	.box p:nth-child(2) {
	  right: 0;
	  top: 0;
	}

	.box p:nth-child(3) {
	  left: 0;
	  bottom: 0;
	}

	.box p:nth-child(4) {
	  right: 0;
	  bottom: 0;
	}

	.box:nth-child(2) {
	  transform: rotate(45deg);
	}

	@keyframes move {
	  0% {
	    transform: scale(0);
	  }

	  50% {
	    transform: scale(1);
	  }

	  100% {
	    transform: scale(0);
	  }
	}

	.box:nth-child(1) p:nth-child(1) {
	  animation-delay: -0.3s;
	}

	.box:nth-child(2) p:nth-child(1) {
	  animation-delay: -0.6s;
	}

	.box:nth-child(1) p:nth-child(2) {
	  animation-delay: -0.9s;
	}

	.box:nth-child(2) p:nth-child(2) {
	  animation-delay: -1.2s;
	}

	.box:nth-child(1) p:nth-child(3) {
	  animation-delay: -1.5s;
	}

	.box:nth-child(2) p:nth-child(3) {
	  animation-delay: -1.8s;
	}

	.box:nth-child(1) p:nth-child(4) {
	  animation-delay: -2.1s;
	}

	.box:nth-child(2) p:nth-child(4) {
	  animation-delay: -2.4s;
	}